<template>
  <div class='container'>
    <dv-loading v-show='spinning' style='color: #fff'>加载中...</dv-loading>
    <div v-show='!spinning' id='svgContainer'>
    </div>
  </div>
</template>

<script>
import *as d3 from 'd3'

export default {
  components: {},
  mixins: [],
  props: {
    targetData: {
      type: Array,
      default() {
        return []
      }
    },
    path: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      spinning: false
    }
  },
  computed: {},
  watch: {
    targetData: {
      handler(val) {
        this._traverseData(val)
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.spinning = true
    this.$nextTick().then(async () => {
      console.log(this.path, 'this.path')
      let svgData = await d3.xml(require('@/assets/home-svgs/需求侧系统1.1.svg'))
      setTimeout(() => {
        this.spinning = false
      }, 1000)
      let targetDom = d3.select('#svgContainer').node()
      if (svgData && targetDom) {
        targetDom.append(svgData.documentElement)
        this._traverseData(this.targetData)
      }
    })
  },
  updated() {
  },
  destroyed() {
  },
  methods: {
    _traverseData(data = []) {
      if (data.length === 0) return
      data.forEach(item => {
        let targetValue = '--'
        if (item.pointValue) {
          targetValue = item.pointValue
        }
        this._draw(item.pointId, targetValue)
      })
    },
    _draw(id, targetData = 0) {
      if( d3.select(`#pointId_${id}`).node()){
        d3.select(`#pointId_${id}`).node().innerHTML = targetData
      }

      if( d3.select(`.pointId_${id}`).node()){
        d3.select(`.pointId_${id}`).node().innerHTML = targetData
      }
    }
  }
}
</script>
<style lang='less' scoped>
.container {
  height: 100%;
}

#svgContainer {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
